<template>
  <!-- 审查意见 s -->
  <div v-loading="loader" style="height: 100%;">
    <div class="button-box">
      <template v-if="!isLook">
        <el-button
          v-if="scyjActiveName == 'ny' && !showFs"
          :disabled="yjAddSwitch"
          style="margin-left: 20px;"
          type="primary"
          size="small"
          @click="handleYjAdd"
        >新增</el-button>
      </template>

      <template v-if="!isLook">
        <el-button
          v-if="scyjActiveName == 'fsny' && showFs"
          :disabled="yjAddSwitch"
          style="margin-left: 20px;"
          type="primary"
          size="small"
          @click="handleYjAdd"
        >新增</el-button>
      </template>

      <template v-if="!isLook">
        <el-button
          v-if="nyYjData.length <= 0 && scyjActiveName == 'ny' && !showFs"
          :disabled="yjAddSwitch"
          type="primary"
          size="small"
          @click="handleYjPassAll"
        >一键通过</el-button>
      </template>

      <template v-if="!isLook">
        <el-button
          v-if="wyYjData.length > 0 && scyjActiveName == 'wy' && !showFs"
          :disabled="yjAddSwitch"
          type="primary"
          size="small"
        >一键通过</el-button>
      </template>

      <template v-if="!isLook">
        <el-button
          v-if="nyYjData.length <= 0 && scyjActiveName == 'fsny' && showFs"
          :disabled="yjAddSwitch"
          type="primary"
          size="small"
          @click="handleYjPassAll"
        >一键通过</el-button>
      </template>

      <template v-if="!isLook">
        <el-button
          v-if="wyYjData.length > 0 && scyjActiveName == 'fswy' && showFs"
          :disabled="yjAddSwitch"
          type="primary"
          size="small"
        >一键通过</el-button>
      </template>
    </div>
    <div class="scyj">
      <el-tabs v-model="scyjActiveName" @tab-click="handleYjTabsClick">
        <el-tab-pane v-if="showFs" label="复审内业审查意见" name="fsny">
          <ul
            v-if="nyYjData.length > 0 && !yjAddSwitch && scyjActiveName == 'fsny'"
            class="yj-list setScroll"
          >
            <li v-for="(item, index) in nyYjData" :key="index">
              <div class="left">
                <div class="item">问题图层：{{ item.problemLayer }}</div>
                <div class="item">问题类型：{{ item.contentType }}</div>
                <div class="item">问题描述：{{ item.content }}</div>
                <div class="item">审查情况：{{ item.status | auditOptionFormatStatus }}</div>
              </div>
              <div class="right">
                <div class="time">{{ item.updateTime ? item.updateTime : item.createTime }}</div>
                <div v-if="!isLook" class="buttons">
                  <el-popover popper-class="audit-opinion-popover" placement="bottom">
                    <el-radio-group v-model="item.status" @change="handleYjEdit(item)">
                      <el-radio :label="2">未修改</el-radio>
                      <el-radio :label="3">已修改</el-radio>
                    </el-radio-group>
                    <el-button slot="reference" type="text">修改情况</el-button>
                  </el-popover>
                  <el-popconfirm placement="top" title="确定删除该条意见吗？" @onConfirm="handleYjDel(item)">
                    <el-button
                      slot="reference"
                      style="color: #F92828; margin-left: 10px;"
                      type="text"
                    >删除</el-button>
                  </el-popconfirm>
                </div>
              </div>
            </li>
          </ul>
          <div v-if="yjAddSwitch && scyjActiveName == 'fsny'" class="yj-add-form setScroll">
            <el-form ref="nyYjForm" label-width="80px" :model="nyYjForm" :rules="nyYjFormRules">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="问题图层" prop="problemLayer">
                    <el-select
                      v-model="nyYjForm.problemLayer"
                      :loading="problemLayerDataLoader"
                      placeholder="请选择问题图层"
                    >
                      <el-option
                        v-for="(item, index) in problemLayerData"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="问题类型" prop="contentType">
                    <el-select
                      v-model="nyYjForm.contentType"
                      :loading="contentTypeDataLoader"
                      placeholder="请选择问题类型"
                    >
                      <el-option
                        v-for="(item, index) in contentTypeData"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="nyYjForm.contentType != 4">
                <el-col :span="24">
                  <el-form-item label="审查意见" prop="content">
                    <el-input
                      v-model="nyYjForm.content"
                      :rows="6"
                      type="textarea"
                      placeholder="请填写审查意见"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button size="small" type="primary" @click="handleNyYjSubmit">提交</el-button>
                <el-button size="small" @click="yjAddSwitch = false">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="nyYjData.length <= 0 && !yjAddSwitch" class="no-data">- 暂无数据 -</div>
        </el-tab-pane>
        <el-tab-pane v-if="showFs" label="复审外业核查意见" name="fswy">
          <ul
            v-if="wyYjData.length > 0 && !yjAddSwitch && scyjActiveName == 'fswy'"
            class="yj-list setScroll"
          >
            <li v-for="(item, index) in wyYjData" :key="index">
              <div class="left">
                <div class="item">记录人：{{ item.name }}</div>
                <div class="item">经纬度：{{ item.coorDonate }}</div>
                <div class="item">位置信息：{{ item.place }}</div>
                <div class="item">审查意见：{{ item.content }}</div>
                <div class="item">文字记录：{{ item.detail }}</div>
              </div>
              <div class="right">
                <div class="time">{{ item.time }}</div>
                <div v-if="!isLook" class="buttons">
                  <el-button type="text" @click="handleWyYjCheck(item.id, 'YES')">通过</el-button>
                  <el-button
                    style="color: #F92828"
                    type="text"
                    @click="handleWyYjCheck(item.id, 'NO')"
                  >不通过</el-button>
                </div>
              </div>
            </li>
          </ul>
          <div v-if="wyYjData.length <= 0 && !yjAddSwitch" class="no-data">- 暂无数据 -</div>
        </el-tab-pane>
        <el-tab-pane label="初审内业审查意见" name="ny">
          <ul
            v-if="nyYjData.length > 0 && !yjAddSwitch && scyjActiveName == 'ny'"
            class="yj-list setScroll"
          >
            <li v-for="(item, index) in nyYjData" :key="index">
              <div class="left">
                <div class="item">问题图层：{{ item.problemLayer }}</div>
                <div class="item">问题类型：{{ item.contentType }}</div>
                <div class="item">问题描述：{{ item.content }}</div>
                <div class="item">审查情况：{{ item.status | auditOptionFormatStatus }}</div>
              </div>
              <div class="right">
                <div class="time">{{ item.updateTime ? item.updateTime : item.createTime }}</div>
                <div v-if="!isLook" class="buttons">
                  <template v-if="!fsLinkValue">
                    <el-popover popper-class="audit-opinion-popover" placement="bottom">
                      <el-radio-group v-model="item.status" @change="handleYjEdit(item)">
                        <el-radio :label="2">未修改</el-radio>
                        <el-radio :label="3">已修改</el-radio>
                      </el-radio-group>
                      <el-button slot="reference" type="text">修改情况</el-button>
                    </el-popover>
                    <el-popconfirm
                      placement="top"
                      title="确定删除该条意见吗？"
                      @onConfirm="handleYjDel(item)"
                    >
                      <el-button
                        slot="reference"
                        style="color: #F92828; margin-left: 10px;"
                        type="text"
                      >删除</el-button>
                    </el-popconfirm>
                  </template>
                </div>
              </div>
            </li>
          </ul>
          <div v-if="yjAddSwitch && scyjActiveName == 'ny'" class="yj-add-form setScroll">
            <el-form ref="nyYjForm" label-width="80px" :model="nyYjForm" :rules="nyYjFormRules">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="问题图层" prop="problemLayer">
                    <el-select
                      v-model="nyYjForm.problemLayer"
                      :loading="problemLayerDataLoader"
                      placeholder="请选择问题图层"
                    >
                      <el-option
                        v-for="(item, index) in problemLayerData"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="问题类型" prop="contentType">
                    <el-select
                      v-model="nyYjForm.contentType"
                      :loading="contentTypeDataLoader"
                      placeholder="请选择问题类型"
                    >
                      <el-option
                        v-for="(item, index) in contentTypeData"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="nyYjForm.contentType != 4">
                <el-col :span="24">
                  <el-form-item label="审查意见" prop="content">
                    <el-input
                      v-model="nyYjForm.content"
                      :rows="6"
                      type="textarea"
                      placeholder="请填写审查意见"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button size="small" type="primary" @click="handleNyYjSubmit">提交</el-button>
                <el-button size="small" @click="yjAddSwitch = false">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="nyYjData.length <= 0 && !yjAddSwitch" class="no-data">- 暂无数据 -</div>
        </el-tab-pane>
        <el-tab-pane v-if="layerName != 'LandCertificate'" label="初审外业核查意见" name="wy">
          <ul
            v-if="wyYjData.length > 0 && !yjAddSwitch && scyjActiveName == 'wy'"
            class="yj-list setScroll"
          >
            <li v-for="(item, index) in wyYjData" :key="index">
              <div class="left">
                <div class="item">记录人：{{ item.name }}</div>
                <div class="item">经纬度：{{ item.coorDonate }}</div>
                <div class="item">位置信息：{{ item.place }}</div>
                <div class="item">审查意见：{{ item.content }}</div>
                <div class="item">文字记录：{{ item.detail }}</div>
              </div>
              <div class="right">
                <div class="time">{{ item.time }}</div>
                <div v-if="!isLook" class="buttons">
                  <el-button type="text" @click="handleWyYjCheck(item.id, 'YES')">通过</el-button>
                  <el-button
                    style="color: #F92828"
                    type="text"
                    @click="handleWyYjCheck(item.id, 'NO')"
                  >不通过</el-button>
                </div>
              </div>
            </li>
          </ul>
          <div v-if="wyYjData.length <= 0 && !yjAddSwitch" class="no-data">- 暂无数据 -</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <!-- 审查意见 e -->
</template>

<script>
import {
  land_early_first_audit_select,
  land_early_first_audit_add,
  get_Opinion_type,
  get_land_drawing_problem_layer,
  land_early_first_audit_delete,
  land_early_first_audit_update,
  land_early_first_audit_add_all,
  first_sq_supervising_info,
  second_sq_supervising_info,
  qq_wyyj_pc_audit
} from '@/api/auditOpinion'

export default {
  name: 'AuditOpinion', // 审查意见
  props: [
    'currentPkData',
    'isLook',
    'layerName',
    'linkValue',
    'fsLinkValue',
    'showFs',
    'initActiveName',
    'fun',
    'fsFun'
  ],
  component: {},
  data() {
    return {
      loader: false, // 加载
      scyjActiveName: '', // 审查意见绑定的tabName
      yjAddSwitch: false, // 审查意见添加开关
      nyYjForm: {
        drawingAuditId: '', // 图件审查编号
        projectId: localStorage.getItem('projectId'), // 项目ID
        landId: '', // 片块ID
        problemLayer: '', // 问题图层
        problemLayerType: '', // 问题图层类型
        content: '', // 审查意见
        linkValue: '', // 环节值
        status: 1, // 问题状态
        contentType: '' // 问题类型
      },
      nyYjQuery: {
        projectId: localStorage.getItem('projectId'),
        landId: '',
        linkValue: ''
      },
      nyYjAllSubmit: {
        projectId: parseInt(localStorage.getItem('projectId')),
        landId: '',
        process: '',
        stage: ''
      },
      wyYjQuery: {
        page: 1,
        size: 9999,
        projectId: localStorage.getItem('projectId'),
        landId: ''
      },
      nyYjFormRules: {
        problemLayer: [
          { required: true, message: '请选择问题图层', trigger: 'change' }
        ],
        contentType: [
          { required: true, message: '请选择问题类型', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请填写审查意见', trigger: 'blur' }
        ]
      },

      problemLayerData: [], // 问题图层枚举
      contentTypeData: [], // 问题类型枚举
      problemLayerDataLoader: false, // 问题图层枚举-加载
      contentTypeDataLoader: false, // 问题类型枚举-加载

      nyYjData: [], // 内业意见数据
      wyYjData: [], // 外业意见数据

      curYjData: '' // 当前选中意见数据
    }
  },
  watch: {
    scyjActiveName(val) {
      switch (val) {
        case 'ny':
          this.getNyYjData()
          break
        case 'wy':
          this.getWyYjData(this.linkValue)
          break
        case 'fsny':
          this.getNyYjData()
          break
        case 'fswy':
          this.getWyYjData(this.fsLinkValue)
          break
        default:
          break
      }
    },
    layerName: {
      handler(val) {
        // 监听图层类型变化
        this.nyYjForm['problemLayerType'] = val
      },
      immediate: true
    },
    currentPkData: {
      handler(obj) {
        // 监听当前选中片块变化
        this.nyYjForm.landId = obj.landId
        this.nyYjQuery.landId = obj.landId
        this.wyYjQuery.landId = obj.landId
      },
      immediate: true
    }
  },
  created() {
    this.scyjActiveName = this.initActiveName || 'ny'
    this.getProblemLayerData()
    this.getContentTypeData()
  },
  methods: {
    getNyYjData() {
      switch (this.scyjActiveName) {
        case 'ny':
          this.nyYjForm['linkValue'] = this.linkValue
          this.nyYjQuery['linkValue'] = this.linkValue
          break
        case 'fsny':
          this.nyYjForm['linkValue'] = this.fsLinkValue
          this.nyYjQuery['linkValue'] = this.fsLinkValue
          break
        default:
          break
      }
      this.loader = true
      land_early_first_audit_select(this.nyYjQuery)
        .then(res => {
          this.loader = false
          this.nyYjData = res.data
        })
        .catch(() => {
          this.loader = false
        })
    },
    getWyYjData(linkValue) {
      let apiName = ''
      switch (linkValue) {
        case 'EARLY_MAPPING_RESULT_FIRST_AUDIT': // 外业前期初审
          apiName = first_sq_supervising_info
          break
        case 'EARLY_MAPPING_RESULT_SECOND_AUDIT': // 外业前期复审
          apiName = second_sq_supervising_info
          break
        default:
          apiName = first_sq_supervising_info
          break
      }
      this.loader = true
      apiName(this.wyYjQuery)
        .then(res => {
          this.loader = false
          this.wyYjData = res.data.rows || []
        })
        .catch(() => {
          this.loader = false
        })
    },
    handleYjPassAll() {
      this.nyYjAllSubmit['stage'] = this.layerName
      if (this.scyjActiveName === 'ny') {
        this.nyYjAllSubmit['process'] = this.linkValue
      } else if (this.scyjActiveName === 'fsny') {
        this.nyYjAllSubmit['process'] = this.fsLinkValue
      }
      this.nyYjAllSubmit['landId'] = this.currentPkData.landId
      this.loader = true
      land_early_first_audit_add_all(this.nyYjAllSubmit)
        .then(res => {
          this.loader = false
          this.$message({
            message: '处理成功',
            type: 'success'
          })
          this.getNyYjData()
        })
        .catch(() => {
          this.loader = false
        })
    },
    handleYjAdd() {
      // 审查意见添加
      this.yjAddSwitch = true
    },
    handleYjEdit(item) {
      // 审查意见修改
      this.curYjData = item

      if (this.scyjActiveName === 'ny') {
        this.handleNyYjEdit()
      } else if (this.scyjActiveName === 'fsny') {
        this.handleNyYjEdit()
      } else {
        this.hanldeWyYjEdit()
      }
    },
    handleNyYjEdit() {
      // 审查意见修改-内业
      this.loader = true
      land_early_first_audit_update({
        drawingAuditId: this.curYjData.id,
        status: this.curYjData.status
      })
        .then(res => {
          this.loader = false
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getNyYjData()
        })
        .catch(() => {
          this.loader = false
        })
    },
    handleYjDel(item) {
      // 审查意见删除
      this.curYjData = item
      if (this.scyjActiveName === 'ny') {
        this.handleNyYjDel()
      } else if (this.scyjActiveName === 'fsny') {
        this.handleNyYjDel()
      } else {
        this.hanldeWyYjDel()
      }
    },
    handleNyYjDel() {
      // 审查意见删除-内业
      this.loader = true
      land_early_first_audit_delete({
        id: this.curYjData.id
      })
        .then(res => {
          this.loader = false
          this.$alert('删除意见成功', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.getNyYjData()
            }
          })
        })
        .catch(() => {
          this.loader = false
        })
    },
    hanldeWyYjDel() {
      // 审查意见删除-外业
    },
    handleYjTabsClick(tab, event) {
      // 审查意见tab点击事件
      this.yjAddSwitch = false
      if (tab.name === this.scyjActiveName) return
      this.scyjActiveName = tab.name
    },
    handleNyYjSubmit() {
      // 内业审查意见添加提交
      this.$refs['nyYjForm'].validate(valid => {
        if (valid) {
          if (this.nyYjForm.contentType == 4) {
            this.nyYjForm.status = 3
            this.nyYjForm.content = '无问题'
          } else {
            this.nyYjForm.status = 1
          }
          this.loader = true
          land_early_first_audit_add(this.nyYjForm)
            .then(res => {
              this.loader = false
              this.$alert('添加意见成功', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  this.yjAddSwitch = false
                  this.getNyYjData()
                }
              })
            })
            .catch(() => {
              this.loader = false
            })
        }
      })
    },
    getProblemLayerData() {
      // 获取问题图层枚举数据
      this.problemLayerDataLoader = true
      get_land_drawing_problem_layer({
        layerName: this.layerName
      })
        .then(res => {
          this.problemLayerDataLoader = false
          this.problemLayerData = res.data
        })
        .catch(() => {
          this.problemLayerDataLoader = false
        })
    },
    getContentTypeData() {
      // 获取问题类型枚举数据
      this.contentTypeDataLoader = true
      get_Opinion_type()
        .then(res => {
          this.contentTypeDataLoader = false
          this.contentTypeData = res.data
        })
        .catch(() => {
          this.contentTypeDataLoader = false
        })
    },
    handleWyYjCheck(id, audit) {
      this.$confirm(
        audit === 'YES' ? '确认通过吗？' : '确认不通过吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.loader = true
        qq_wyyj_pc_audit({
          id: id,
          audit: audit
        })
          .then(res => {
            this.loader = false
            this.$message({
              message: '审查成功',
              type: 'success'
            })
            this.hanldeWyYjDel()
          })
          .catch(() => {
            this.loader = false
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.scyj {
  position: relative;

  .yj-add-btn {
    position: absolute;
    right: 30px;
    top: 9px;
    z-index: 99;
  }

  .yj-list {
    margin: 0;
    padding: 0;
    height: 346px;
    overflow-x: hidden;
    overflow-y: auto;

    li {
      display: flex;
      justify-content: space-between;
      padding: 20px 30px;
      margin-left: 20px;
      border-bottom: 1px solid #e1e2e6;

      .left {
        width: 70%;
        font-size: 14px;
        line-height: 1.5;
        color: rgba(140, 140, 140, 1);

        .item {
          margin-top: 6px;
          &:first-child {
            margin-top: 0;
          }
        }
      }

      .right {
        width: 24%;

        .time {
          font-size: 13px;
          line-height: 1.5;
          color: rgba(153, 153, 153, 1);
          margin-bottom: 20px;
        }
      }
    }
  }

  .yj-add-form {
    padding: 30px;
  }

  /deep/ .el-tabs__item.is-active {
    background-color: transparent !important;
  }

  /deep/ .el-tabs__nav-scroll {
    background-color: transparent !important;
  }

  /deep/ .el-tabs__item {
    padding: 0 12px !important;
    width: initial !important;
  }

  /deep/ .el-tabs__nav-wrap::after {
    display: none !important;
  }

  /deep/ .el-tabs__header {
    margin-bottom: 0 !important;
    padding-bottom: 12px !important;
    padding-left: 18px !important;
    border-bottom: 1px solid #f2f2f2 !important;
  }

  .button-box {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background-color: #fff;
    padding-right: 30px;
    z-index: 999;
    padding-top: 10px;
    border-top: 1px solid #f7f8fa;
  }
}
</style>
